/**
 * Created by RC-Y on 2017/3/29.
 */
window.onload = function () {
    leftSwipe();
    rightSwipe();
}
// 左侧菜单
function leftSwipe() {
    // 1.做菜单可以滑动
    // 2.超过一定距离不能滑动 滑动区间
    // 3.触摸结束的时候 判断是否在定位区间内 否则吸附回去
    // 4.点击菜单的时候 改变当前样式
    // 5.点击菜单的时候 定位到当前菜单最顶部 如果不满足就不做定位

    // 获取父容器
    var parentBox = document.querySelector('.jd_category_left');
    var childBox = parentBox.querySelector('ul');
    var parentHeight = parentBox.offsetHeight;
    var childHeight = childBox.offsetHeight;

    // translateY 初始定位 其实就是最大定位
    var maxY = 0;
    // translateY 最下面的定位 其实就是最小定位 父容器高度-子容器高度
    var minY = parentHeight - childHeight;
    // 自定义缓冲的距离
    var distance = 100;
    // translateY 最大滑动定位
    var maxSwipe = maxY + 100;
    // translateY 最小滑动定位
    var minSwipe = minY - 100;


    // 第一步****************************************************************************** 让菜单滑动
    var startY = 0;
    var moveY = 0;
    var distanceY = 0;
    var isMove = false;

    var currY = 0;//记录当前定位 相当于轮播图里的index（记录图片位置）

    // 定义公用方法
    var addTransition = function () {
        childBox.style.webkitTransition = "all .2s";
        childBox.style.transition = "all .2s";
    }
    var removeTransition = function () {
        childBox.style.webkitTransition = "none";
        childBox.style.transition = "none";
    }
    var setTranslateY = function (y) {
        childBox.style.webkitTransform = "translateY("+y+"px)";
        childBox.style.transform = "translateY("+y+"px)";
    }

    // 绑定事件
    childBox.addEventListener('touchstart',function (e) {
        startY = e.touches[0].clientY;
    });
    childBox.addEventListener('touchmove',function (e) {
        moveY = e.touches[0].clientY;
        distanceY = moveY - startY;
        console.log(distanceY);
        // 清除过渡
        removeTransition();
        // 设置定位
        // 第二步 ***************************************************************滑动到一定距离不能滑动
        // 当前要做定位的位置要在滑动区间内
        if((currY + distanceY) < maxSwipe && (currY + distanceY) > minSwipe){
            setTranslateY(currY + distanceY);
        }
    });
    window.addEventListener('touchend',function (e) {//模拟器有bug所以这里用window接受
        // 第三步 ****************************************************判断是否在定位区间内 否则吸附回去
        // 当向下划的时候 大于 最大定位
        if((currY + distanceY) > maxY){
            currY = maxY;
            addTransition();
            setTranslateY(currY);
        }
        // 当向上划的时候 小于 最小定位
        else if((currY + distanceY) < minY) {
            currY = minY;
            addTransition();
            setTranslateY(currY);
        }else {
            // 记录当前定位 上一次到期定位+这一次改变的
            currY = currY + distanceY;
        }

        // 重置所有参数 不包括currY
        startY = 0;
        moveY = 0;
        distanceY = 0;
        isMove = false;
    });

    // 绑定tap
    // 获取所有li 以清除他的样式
    var lis = childBox.querySelectorAll('li');
    itcast.tap(childBox,function (e) {
        // 找到事件触发源  然后找到点击的那个li元素
        // console.log(e.target.parentNode);
        var li = e.target.parentNode;
        for(var i = 0;i < lis.length;i++){
            lis[i].className = "";
            // 设置索引
            lis[i].index = i;
        }
        // 4.此处实现了第四点需求
        li.className = "now";

        // 5.点击菜单的时候 定位到当前菜单最顶部 如果不满足就不做定位
        // 需要知道将要定位的位置
        var translateY = -li.index * 50;//通过设置索引 * 行高
        //这里要判断是否满足定位区间
        //  就是 定位要大于 定位区间的最小定位
        if (translateY > minY){
            currY = translateY;
            addTransition();
            setTranslateY(currY);
        }else {
            currY = minY;
            addTransition();
            setTranslateY(currY);
        }
    });

}
// 右侧内容
function rightSwipe() {
    // 通过封装的swipe插件来实现
    itcast.iScroll({
        swipeDom:document.querySelector('.jd_category_right'),
        swipeType:'y',//滑动的方向
        swipeDistance:50//缓冲的距离
    });

}























